// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { agentGoodsList } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList, Good } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class AgentGoods extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      dataList: {
        total: 0,
        size: 10,
        current: 1,
        pages: 1,
        records: []
      }
    }
  }

  componentDidMount() {
    this.loading = Toast.loading('加载中')
    this.handleData({
      current: 1,
    })
  }

  handleData(options) {
    const { data, productId } = this.props
    agentGoodsList({
      productId,
      size: 10,
      ...options
    }).then(res => {
      Portal.remove(this.loading)
      this.setState({
        dataList: {
          ...res.data,
          records: this.state.dataList.records.concat(res.data.records)
        }
      })
    }).catch(error => {
      console.log(error, 11111)
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { data, productId } = this.props
    const { dataList: { size } } = this.state
    agentGoodsList({
      current: 1,
      productId,
      size: 10,
    }).then(res => {
      this.setState({
        dataList: res.data,
        refreshing: false
      })
    }).catch(error => {
      console.log(error, 11111)
    })
  }

  onEndReached = () => {
    const { dataList: { current, size, records, total } } = this.state
    if (records.length < total) {
      this.handleData({
        current: current + 1,
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }

  render() {
    const { refreshing, dataList } = this.state
    const { integral } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="代理商品"
          back={true}
        />
        <RnFlatList
          style={{
            flex: 1,
            backgroundColor: '#f0f2f5',
          }}
          columnWrapperStyle={{
            paddingTop: 10,
          }}
          onScroll={this.onScroll}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          numColumns={2}
          removeClippedSubviews={true}
          data={dataList}
          renderItem={({ item, index }) => {
            const width = (ScreenWidth - 30) / 2
            return (
              <View style={{
                width: width,
                backgroundColor: '#fff',
                // margin: 3
                marginLeft: 10,
                borderRadius: 10,
                overflow: 'hidden'
                // marginBottom: 3
              }}>
                <TouchableOpacity
                  onPress={() => {
                    Actions.agentGoodDetails({ goodsId: item.id, productId: item.productId, goodType: '1' })
                  }}
                >
                  <CacheImage
                    resizeMod={"contain"}
                    style={{
                      width: width,
                      height: width,
                    }}
                    source={{ uri: `${pathHead}${item.goodsMainPic}` }}
                    
                  />
                </TouchableOpacity>
                <View style={{
                  padding: 5
                }}>
                  <View style={{
                    marginBottom: 5,
                  }}>
                    <Text
                      numberOfLines={1}
                      ellipsizeMode={'tail'}
                      style={{ fontSize: 13, color: '#333', lineHeight: 24, fontWeight: 'bold' }}
                    >{item.goodsName}</Text>
                    <Text style={{ fontSize: 12, color: '#333', lineHeight: 24, }}>{item.goodsNo}</Text>
                  </View>
                  <View style={{
                    flexDirection: 'row',
                    alignItems: 'flex-start',
                    justifyContent: 'space-between',
                  }}>
                    <View style={{
                      flex: 1,
                      marginRight: 10
                    }}>
                      <View style={{
                      }}>
                        <Text style={{ fontSize: 14, color: '#E5C67B', lineHeight: 24, }}>￥{item.goodsPrice} | CV:{item.cv}</Text>
                        <Text style={{ fontSize: 10, color: '#BBBDC0', lineHeight: 16, textDecorationLine: 'line-through' }}>￥{item.marketPrice}</Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            )
          }}
        />
      </View >
    );
  }
}


export default connect(({ user, integral }) => ({
  user, integral
}))(pureRender(AgentGoods))
